<link href="{{ url_for('static', filename='css/tags.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ url_for('static', filename='js/tags.js') }}"></script>

{% with modal_add_tags=ail_tags %}
	{% include 'modals/add_tags.html' %}
{% endwith %}

{% include 'modals/edit_tag.html' %}

<style>
    .object_image {
        filter: blur(5px);
    }
</style>

<div class="card my-1">
	<div class="card-header">
		<h4 class="text-secondary">{{ meta["id"] }} :</h4>
		<ul class="list-group mb-2">
            <li class="list-group-item py-0">
                <table class="table">
                    <tbody style="font-size: 15px;">
                    <tr>
                        <td>
                            <svg height="26" width="26">
                                <g class="nodes">
                                    <circle cx="13" cy="13" r="13" fill="orange"></circle>
                                    <text x="13" y="13" text-anchor="middle" dominant-baseline="central" class="{{ meta["svg_icon"]["style"] }}" font-size="16px">{{ meta["svg_icon"]["icon"] }}</text>
                                </g>
                            </svg>
                            {{ meta['type'] }}
                        </td>
                        <td><b>First Seen:</b> {% if meta['first_seen'] %}{{ meta['first_seen'][0:4] }}-{{ meta['first_seen'][4:6] }}-{{ meta['first_seen'][6:8] }}{% endif %}</td>
                        <td><b>Last Seen:</b> {% if meta['last_seen'] %}{{ meta['last_seen'][0:4] }}-{{ meta['last_seen'][4:6] }}-{{ meta['last_seen'][6:8] }}{% endif %}</td>
                    </tr>
                    </tbody>
                </table>
            </li>
			<li class="list-group-item py-0">
				<div id="accordion_image" class="my-3">
                    <div class="card">
                        <div class="card-header py-1" id="headingImage">
                            <button class="btn w-100 collapsed rotate" data-toggle="collapse" data-target="#collapseImage" aria-expanded="false" aria-controls="collapseImage">
                                <span class="row text-left">
                                    <div class="col-11">
                                        <span class="mt-2">
                                            <i class="far fa-image"></i> Show Image&nbsp;&nbsp;
                                        </span>
                                    </div>
                                    <div class="col-1 text-primary">
                                        <i class="fas fa-chevron-circle-down"></i>
                                    </div>
                                </span>
                            </button>
                        </div>
                        <div id="collapseImage" class="collapse show" aria-labelledby="headingImage" data-parent="#accordion_image">
                            <div class="card-body text-center">
                                {% include 'objects/image/block_blur_img_slider.html' %}

								<img class="object_image mb-1" usemap="#image-map" src="{{ url_for('objects_ocr.ocr_image', filename=meta['id'])}}">
                                <map name="image-map">
                                    {% for c in meta['map'] %}
                                        <area shape="poly" coords="{{ c[0] }}" title="{{ c[1] }}">
                                    {% endfor %}
                                </map>
                            </div>
                        </div>
                    </div>
                </div>
			</li>
            <li class="list-group-item py-0">
                <pre class="my-0" style="white-space: pre-wrap;">{{ meta['content'] }}</pre>
                {% if meta['translation'] %}
                    <hr class="m-1">
                    <pre class="my-0 text-secondary" style="white-space: pre-wrap;">{{ meta['translation'] }}</pre>
               {% endif %}



                {% if not is_correlation %}
                    <div class="my-1">

                        {% set mess_id_escape= meta['id'] | replace("/", "_") %}
                        <span class="btn btn-outline-dark p-0 px-1" type="button" data-toggle="collapse" data-target="#collapseTrans{{ mess_id_escape }}" aria-expanded="false" aria-controls="collapseTrans{{ mess_id_escape }}">
                            <i class="fas fa-language"></i> {% if meta['language'] %}{{ meta['language'] }}{% endif %}
                        </span>
                        <div class="collapse" id="collapseTrans{{ mess_id_escape }}">
                            <div class="card card-body">
                                <form method="post" action="{{ url_for('languages_ui.translate_object') }}">
                                    <input type="text" id="type" name="type" value="{{meta['type']}}" hidden>
                                    <input type="text" id="id" name="id" value="{{meta['id']}}" hidden>
                                    <span class="badge badge-primary">Source:</span>
                                    <span class="">
                                        <select id="language_target" name="language_target" class="form-select" aria-label="Message Language" onchange="$('#translation').val('');">
                                                <option selected value="{{ meta['language'] }}">{{ meta['language'] }}</option>
                                            {% for language in translation_languages %}
                                                <option value="{{ language }}">{{ translation_languages[language] }}</option>
                                            {% endfor %}
                                        </select>
                                    </span>
                                    {% if translation_target %}
                                        <input type="text" id="target" name="target" value="{{translation_target}}" hidden>
                                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="badge badge-primary">Target:</span><span>{{translation_target}}</span>
                                        <textarea class="form-control" id="translation" name="translation">{{ meta['translation'] }}</textarea>
                                        <button class="btn btn-dark" type="submit">
                                            <i class="fas fa-pen-alt"> Update Language or Translation</i>
                                        </button>
                                    {% else %}
                                        <button class="btn btn-dark" type="submit">
                                            <i class="fas fa-pen-alt"> Update Language</i>
                                        </button>
                                    {% endif %}
                                </form>
                                <div>
                                    <a class="btn btn-primary" href="{{ url_for('languages_ui.detect_object_language')}}?type={{ meta['type'] }}&id={{ meta['id'] }}">
                                        <i class="fas fa-redo"></i> Detect Language
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}




            </li>

			<li class="list-group-item py-0">
				<div class="my-2">
					Tags:
					{% for tag in meta['tags'] %}
                        <button class="btn btn-{{ bootstrap_label[loop.index0 % 5] }}"
                                data-toggle="modal" data-target="#edit_tags_modal"
						        data-tagid="{{ tag }}" data-objtype="{{ meta['type'] }}" data-objsubtype="" data-objid="{{ meta["id"] }}">
                                {{ tag }}
						</button>
					{%  endfor %}
					<button type="button" class="btn btn-light" data-toggle="modal" data-target="#add_tags_modal">
                        <i class="far fa-plus-square"></i>
                    </button>
				</div>
			</li>
		</ul>

		{% with obj_type='ocr', obj_id=meta['id'], obj_subtype='' %}
			{% include 'modals/investigations_register_obj.html' %}
		{% endwith %}
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#investigations_register_obj_modal">
			<i class="fas fa-microscope"></i> Investigations
		</button>

        <span class="mb-2 float-right">
            {% if is_correlation %}
                <a href="{{ url_for('objects_ocr.object_ocr')}}?subtype={{ meta['subtype'] }}&id={{ meta['id'] }}">
                    <button class="btn btn-info"><i class="fas fa-expand"></i> Show Object</button>
                </a>
            {% else %}
                <a href="{{ url_for('correlation.show_correlation')}}?type={{ meta['type'] }}&subtype={{ meta['subtype'] }}&id={{ meta['id'] }}">
                    <button class="btn btn-info"><i class="far fa-eye"></i> Correlations &nbsp;
                    </button>
                </a>
            {% endif %}
        </span>

	</div>
</div>